<template>
    <div class="qilin-index">
        <header-nav></header-nav>
        <div class="qilin-index-container">
            <left-menu></left-menu>
            <div class="qilin-index-container-content qilin-py-4 qilin-pr-4" :style="getPadding">
                <tags-view></tags-view>
                <div class="qilin-index-container-content-box">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import HeaderNav from "./headerNav.vue";
import LeftMenu from "./leftMenu.vue";
import TagsView from "./tagsView.vue";

import {uploadImageUrl,uploadXlsxUrl} from "@/setting.js";
import WaterMark from "@/utils/waterMark.js";
export default {
    provide(){
        return {
            uploadImageUrl,
            uploadXlsxUrl
        }
    },
    components:{
        HeaderNav,
        LeftMenu,
        TagsView
    },
    data(){
        return {

        }
    },
    computed:{
        // 获取内容区域的左侧边距
        getPadding(){
            return `padding-left:${this.$store.getters["home/getWidth"]+1.428}rem;`
        }
    },
    activated() {
        WaterMark.set(this.$store.state.userInfo.name,this.$Qilin.Storage.getValueLocalStorage("email"));
    },
    deactivated() {
        WaterMark.set("","");
    },
}
</script>
<style lang="less" scoped>
.qilin-index{
    .EDGQilinWH();
    overflow:hidden;
    min-width:42.857rem;
    >.qilin-index-container{ //各页面的入口元素
        width:100%;
        height:calc(100vh - 4.286rem);
        >.qilin-index-container-content{
            position: relative;
            // padding-left:15.714rem;
            transition:padding-left 1s linear 0s;
            height:100%;
            background-color:#f0f0f0;
            >.qilin-index-container-content-box{
                // .EDGQilinWH(100%,100%);
                height:calc(100% - @rem20);
                overflow-y:auto;
                // background-color:#fff;
                // -ms-overflow-style:none;// ie下隐藏滚动条
                // scrollbar-width:none;
                // &::-webkit-scrollbar{ //谷歌下隐藏滚动条
                //     display:none;
                // }
                //兼容火狐浏览器
                scrollbar-width:thin;
                scrollbar-color:#C1C1C1 #fff;
                //兼容IE浏览器
                scrollbar-darkshadow-color:#fff;
                scrollbar-base-color:#C1C1C1;
                // 兼容谷歌浏览器
                &::-webkit-scrollbar{
                    width:@rem5!important; //滚动条宽度
                }
                &::-webkit-scrollbar-thumb{ //滚动条样式
                    background-color:#C1C1C1; 
                    border-radius:@rem5;
                }
                &::-webkit-scrollbar-track{ //滚动条外层轨道样式
                    background-color:#fff;
                }
            }
        }
    }
}
</style>